// 内容渲染指令
<template>
  <div class="test1">
    <h3>内容渲染指令</h3>
    <div>v-text演示：</div>
    <!-- v-text：将name对应的值渲染到span标签中 -->
    <!-- v-text指令会覆盖元素内默认的值（姓名会被张三覆盖） -->
    <span v-text="name">姓名</span>
    <hr />

    <div>插值表达式({{}})演示：</div>
    <!-- 插值表达式：专门用来解决v-text会覆盖默认文本内容的问题，所以实际开发中都会使用插值表达式，很少使用v-text -->
    <p>姓名：{{ name }}</p>
    <!-- 插值表达式：除了支持绑定简单的数据值外，还支持js表达式的运算 -->
    <p>年龄：{{ age + 1 }}</p>
    <p>性别：{{ gender ? "男" : "女" }}</p>
    <hr />

    <div>v-html演示：</div>
    <!-- v-text和插值表达式只能渲染纯文本内容 -->
    <!-- v-html：能够把包含HTML标签的字符串渲染为页面的HTML元素 -->
    <span v-html="detail"></span>
    <hr />
  </div>
</template>

<style lang="scss">
.test1 {
  color: black;
  h3 {
    color: red;
  }
  div {
    color: blue;
  }
}
</style>

<script>
export default {
  name: "Test1",
  // data对象是要渲染到页面上的数据
  data() {
    return {
      name: "张三",
      age: 10,
      gender: true,
      detail: `<p style='color: black; font-size: 10px; font-weight: bold;'>这是一条从服务器获取的数据</p><p style='color: green; font-size: 15px;'>测试数据11</p>`,
    };
  },
};
</script>
